<template id="Pmanage" slot-scope="Cmanage">
  <div>
    <slot name="h1"><h1>个人缴费台账管理</h1></slot>
    <table id="m1" >
      <thead>
        <tr>
          <th>序号</th>
          <th>状态</th>
          <th>订单号</th>
          <th>缴费日期</th>
          <th>缴费金额</th>
          <th>服务器数（月）</th>
          <th>开始日期</th>
          <th>结束日期</th>
          <slot name="cz"><th>充值方式</th></slot>
          <th>备注</th>
        </tr>
      </thead>
      <tbody>
        <slot name="tr">
          <tr v-for="item1 in pMoney" :key="item1" class="m2">
            <th v-for="item2 in item1" :key="item2" class="m3">{{ item2 }}</th>
          </tr>
        </slot>
      </tbody>
    </table>
    <div class="mane">
      <button @click="go">去充值</button>
      <button>上一页</button>
      <button>下一页</button>
    </div>
    <!-- 充值 -->
    <div class="mane2" v-if="xs">
      <ul>
        <li style="margin-right: 288px;">账户余额：{{ yue + "元" }}</li>
        <li class="mane3" >
          订单号：
          <input type="text" v-model.lazy="pMon.c"  class="input-1" />
        </li>
        <li >
          充值金额：
          <input type="text" v-model.lazy="pMon.e"  class="input-1" style="margin-right: 23px;"/>
        </li>
        <li class="mane4">
          <input type="radio" value="支付宝" name="ZFPT"  style="width:30px"/>支付宝

          <input type="radio" value="网上银行" name="ZFPT"  style="width:30px"/>网上银行
        </li>
        <li class="mane5">
          <button @click="to">确认</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pmanage",
  methods: {
    go() {
      this.xs = true;
    },
    to() {
      this.xs = false;
      // for (let val of this.pMoney.e) {
      //   this.ss = val;
      //   this.pMon.e = this.pMon.e + this.ss;
      //   alert(this.pMon.e);
      // }
      this.pMoney.e = this.pMon.e;
      this.pMoney.c = this.pMon.c;
      this.pMoney.push(this.pMon);
    },
  },
  data() {
    return {
      yue: "0",
      ss: "",
      platform1: "",
      platform2: "",
      pMon: {
        a: "5",
        b: "正常",
        c: "001",
        d: "01-01",
        e: "100",
        f: "01",
        g: "2021-01-05 10-13",
        h: "2021-01-05 10-18",
        i: "中国银行",
        j: "无",
      },
      xs: false,
      pMoney: [
        {
          a: "1",
          b: "正常",
          c: "001",
          d: "01-01",
          e: "100",
          f: "01",
          g: "2020-01-01 12-12",
          h: "2020-01-01 12-13",
          i: "支付宝",
          j: "无",
        },
        {
          a: "2",
          b: "正常",
          c: "001",
          d: "01-01",
          e: "200",
          f: "01",
          g: "2020-01-01 08-08",
          h: "2020-01-01 08-10",
          i: "支付宝",
          j: "无",
        },
        {
          a: "3",
          b: "正常",
          c: "001",
          d: "01-01",
          e: "300",
          f: "01",
          g: "2020-01-01 12-12",
          h: "2020-01-01 12-13",
          i: "支付宝",
          j: "无",
        },
        {
          a: "4",
          b: "正常",
          c: "001",
          d: "01-01",
          e: "400",
          f: "01",
          g: "2020-01-01 12-12",
          h: "2020-01-01 12-13",
          i: "支付宝",
          j: "无",
        },
      ],
    };
  },
};
</script>

<style>
*body {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  height: 100%;
  width: 100%;
}
h1 {
  color: aquamarine;
  margin-bottom: 20px;
  text-align: center;
}

#m1 {
  border: 1px soild rgba(204, 204, 192, 0);
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
  width: 1050px;
}
#m1 tr,
#m1 th {
  padding: 8px 16px;
  border: 1px solid red;
  text-align: center;
}
#m1 th {
  color: rgb(152, 152, 231);
  font-weight: 600;
  font-size: 13px;
  height: 45px;
  line-height: 45px;
  background-color: #f6f6f6;
}
.mane {
  margin-left: 800px;
}
.mane > button {
  margin-left: 20px;
  margin-top: 10px;
  font-weight: 560;
  font-size: 17px;
}
* {
  list-style: none;
}
.mane2 {
  background-color: aquamarine;
  position: relative;
  top: -200px;
  left: 30px;
  width: 650px;
  height: 400px;
  margin: 0 auto;
}
.mane2 ul > li {
  margin-top: 40px;
  margin-left: 55px;
  margin-right: 200px;
  float: right;
  line-height: 29px;
  font-size: 22px;
  width: 400px;
}
/* .mane2 ul > .mane3 {
  margin-right: 10px;
}
.mane2 ul > .mane4 {
  margin-right: 10px;
} */
.mane2 .mane5 > button {
  width: 70px;
  margin-left: 0;
}
</style>
